<template>
  <div class="df fdc">
    <!-- 评分 -->
    <div class="totalPoint df jcc fn">
      <div class="totalPoint-left">
        <span>5.0</span>
        <span>综合评分</span>
        <span>高于周边商家96%</span>
      </div>
      <div class="totalPoint-right">
        <div class="attitude">
          <span class="service">服务态度</span>
          <van-rate
            v-model="value"
            :size="18"
            color="#ffd21e"
            allow-half
            void-icon="star"
            void-color="#eee"
          />
          <span class="starValue">{{ this.value }}</span>
        </div>
        <div class="quality">
          <span class="menu">菜品质量</span>
          <van-rate
            v-model="value"
            :size="18"
            color="#ffd21e"
            allow-half
            void-icon="star"
            void-color="#eee"
          />
          <span class="starValue">{{ this.value }}</span>
        </div>
        <div>
          <span style="font-size: 20px">送达时间</span>
          <span class="diliverTime">20分钟</span>
        </div>
      </div>
    </div>
    <!-- 评论 -->
    <div class="comment f1">
      <van-tabs
        class="tabs"
        type="card"
        color="#ffc301"
        title-active-color="black"
      >
        <van-tab :title="`全部${rateLIst.length}`">内容 1</van-tab>
        <van-tab :title="`满意${goodRate.length}`">内容 2</van-tab>
        <van-tab :title="`不满意${badRate.length}`">内容 3</van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapState } from "vuex";
export default {
  data() {
    return {
      value: 4,
    };
  },
  computed:{
     ...mapState('shop',['rateLIst']),
     ...mapGetters('shop',['goodRate','badRate'])
  },
  methods: {
    ...mapActions("shop", ["A_RATELIST"]),
  },
  created() {
    this.A_RATELIST();
  },
};
</script>

<style lang="scss" scoped>
.totalPoint {
  background-color: #fff;
  margin-top: 1px;
  display: flex;
  align-items: center;
  padding: 8px 0;
  .totalPoint-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid #ddd;
    padding: 15px 10px;
    span:nth-child(1) {
      color: gold;
      font-size: 35px;
    }
    span:nth-child(2) {
      font-size: 20px;
      margin-top: 7px;
      margin-bottom: 7px;
    }
    span:nth-child(3) {
      color: #bbb;
      font-size: 17px;
    }
  }
  .totalPoint-right {
    padding: 0 15px;
    .attitude {
      font-size: 20px;
      .service {
        margin-right: 10px;
      }
      .starValue {
        color: #ffd21e;
      }
    }
    .quality {
      margin: 10px 0;
      font-size: 20px;
      .menu {
        margin-right: 10px;
      }
      .starValue {
        color: #ffd21e;
      }
    }
    .diliverTime {
      color: #bbb;
      font-size: 20px;
      margin-left: 10px;
    }
  }
}
.comment {
  background-color: #fff;
  margin-top: 30px;
  .tabs {
    margin-top: 20px;
  }
}
</style>